<template>
  <!-- 辅助治疗组件 -->
  <div>
    <!-- 商品详情 -->
    <div>
      <div
        class="background_gray padding_15 margin_top_20"
        style="border-radius: 5px; font-weight: 600"
      >
        详情信息
      </div>
      <!-- 关联商品 -->
      <div class="margin_top_20" style="display: flex">
        <div class="inp_title" style="position: relative; top: 5px">
          关联商品：
        </div>
        <div style="flex-grow: 1">
          <el-button type="primary" @click="ifGet(false)">
            选择关联商品
          </el-button>
          <!-- 选择完成的商品列表 -->
          <div v-show="selDoneCrouse.length != 0" class="margin_top_20">
            <el-table :data="selDoneCrouse" height="200" style="width: 75%">
              <el-table-column label="商品名" prop="goods_name" />
              <el-table-column label="数量" prop="consume_num" />
              <el-table-column label="单位" prop="unit" />
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    @click="delCrouse(scope.row, scope.$index)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- 价格 -->
    <div>
      <div
        class="background_gray padding_15 margin_top_20"
        style="border-radius: 5px; font-weight: 600"
      >
        价格
      </div>
      <!-- 价格 -->
      <label>
        <div class="flex_y_center" style="margin-top: 20px">
          <div class="inp_title">价格：</div>
          <div style="width: 15%">
            <el-input
              v-model="auxiliaryForm.goods_price"
              placeholder="请输入价格"
            >
              <template slot="prepend">￥</template>
            </el-input>
          </div>
        </div>
      </label>
    </div>
    <!-- 商品属性 -->
    <div style="margin-top: 15px">
      <div
        class="background_gray padding_15"
        style="border-radius: 5px; font-weight: 600"
      >
        商品属性
      </div>
      <!-- 营销方式 -->
      <div style="padding: 15px 0; display: flex">
        <!-- 单选 -->
        <div class="inp_title">
          <span>*</span>
          营销方式：
        </div>
        <div class="flex_direction">
          <el-radio v-model="auxiliaryForm.expire_type" label="sale_at">
            销售日期
          </el-radio>
          <el-radio
            v-model="auxiliaryForm.expire_type"
            label="facture_at"
            style="margin: 15px 0"
          >
            出厂时间
          </el-radio>
          <el-radio v-model="auxiliaryForm.expire_type" label="long_at">
            永久有效
          </el-radio>
        </div>
      </div>
      <!-- 有效期输入框 -->
      <label class="flex_y_center">
        <div class="inp_title">
          <span v-if="auxiliaryForm.expire_type != 'long_at'">*</span>
          有效期：
        </div>
        <el-input
          v-model="auxiliaryForm.effective_at"
          :disabled="
            auxiliaryForm.expire_type == 'long_at' ||
            auxiliaryForm.expire_type == ''
          "
          placeholder="请输入有效期天数"
          style="width: 15%"
        >
          <template slot="append">天</template>
        </el-input>
      </label>
      <!-- 开售时间 -->
      <div class="flex_y_center margin_top_20">
        <div class="inp_title">
          <span>*</span>
          开售时间：
        </div>
        <div>
          <el-radio v-model="auxiliaryForm.goods_status" label="on">
            立即开售
          </el-radio>
          <el-radio v-model="auxiliaryForm.goods_status" label="off">
            放入仓库
          </el-radio>
        </div>
      </div>
      <!-- 商品详情 -->
      <div class="margin_top_20" style="display: flex">
        <div class="inp_title">商品详情：</div>
        <Vue-editor
          :goods-desc="auxiliaryForm.goods_content"
          @sendText="goodsContent"
        />
      </div>
    </div>
    <!-- 添加商品 -->
    <div style="width: fit-content; margin: 20px auto 0">
      <el-button type="primary" @click="$emit('sendData', auxiliaryForm)">
        保存
      </el-button>
    </div>

    <!-- 待选择商品对话框 -->
    <el-dialog title="选择关联课程" :visible.sync="dialog">
      <div slot="title">
        <el-select
          v-model="goodsType"
          placeholder="请选择商品类型"
          @change="ifGet(true)"
        >
          <el-option label="全部" value="all" />
          <el-option
            v-for="(item, index) of relatedProducts"
            :key="index"
            :label="item.type_name"
            :value="item.type_code"
          />
        </el-select>
        <!-- 关键字搜索 -->
        <el-input
          v-model="searchInp"
          placeholder="请输入搜索商品名"
          style="width: 30%; margin: 0 10px"
        >
          <el-button slot="prepend" icon="el-icon-search" />
        </el-input>
        <el-button icon="el-icon-search" type="primary" @click="ifGet(true)">
          搜索
        </el-button>
      </div>
      <div>
        <!-- 课程商品展示列表 -->
        <div>
          <el-table
            ref="goodsTable"
            :data="tableData"
            height="300"
            @row-click="handleCurrentChange"
            @selection-change="selectCrouse"
          >
            <el-table-column type="selection" />
            <el-table-column label="课程名" prop="goods_name" />
          </el-table>
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="dialog = false">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getGoodsList } from '@/api/public'
  import { getRelatedProducts } from '@/api/commodity'

  export default {
    components: {
      VueEditor: () => import('./editor.vue'),
    },
    props: {
      oGoodsDetailsInfo: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      return {
        dialog: false,
        goodsType: 'all', // 商品类型
        searchInp: '', // 搜索关键字
        relatedProducts: [],
        tableData: [],
        selDoneCrouse: [], // 用于暂存选择的商品，展示使用

        auxiliaryForm: {
          is_many_attribute: 'N',
          delivery_method: 'no', // 送货方式
          goods_package: [],
          goods_price: '0.00', // 商品价格
          expire_type: 'long_at', // 营销方式
          effective_at: '', // 有效期
          goods_status: 'on', // 开售时间
          goods_content: '', // 商品详情
        },
      }
    },
    watch: {
      // 监听 selDoneCrouse 的变化，执行循环取出选中的课程的id
      selDoneCrouse(newValue) {
        this.auxiliaryForm.goods_package = []
        // 取出选中课程的id取出放入数组，赋值给form中对应属性值
        for (let item of newValue) {
          this.auxiliaryForm.goods_package.push({
            goods_id: item.goods_id,
            goods_name: item.goods_name,
            unit: item.unit,
            attrbute_id: item.goods_attr_id || item.attrbute_id,
            consume_num: item.consume_num,
          })
        }
      },
      'auxiliaryForm.expire_type'(newValue) {
        if (newValue == 'long_at') {
          this.depositForm.effective_at = ''
        }
      },
    },
    created() {
      this.assignForm()
      this.getAssociation()
    },
    methods: {
      // 将需要的数据赋值到相同属性值上
      assignForm() {
        if (JSON.stringify(this.oGoodsDetailsInfo) != '{}') {
          for (let item in this.auxiliaryForm) {
            if (item == 'goods_package') {
              this.selDoneCrouse = this.oGoodsDetailsInfo.goods_package
            } else this.auxiliaryForm[item] = this.oGoodsDetailsInfo[item]
          }
        }
      },

      // 获取关联商品类型
      getAssociation() {
        getRelatedProducts().then((res) => {
          for (let item of res.data) {
            if (item.type_name != '辅助治疗') {
              this.relatedProducts.push(item)
            }
          }
        })
      },
      // 选择课程
      // 获取课程列表
      ifGet(e) {
        if (this.tableData.length == 0) this.getCourseList()
        else if (e) this.getCourseList()
        else this.dialog = true
      },
      getCourseList() {
        const data = {
          goods_type: this.goodsType,
          goods_name: this.searchInp,
        }
        getGoodsList(data).then((res) => {
          this.tableData = res.data
          this.dialog = true
          this.$nextTick(() => {
            // 判断是否有选择关联商品
            if (this.selDoneCrouse.length != 0) {
              // 进行两层循环对比，如果相同的话，那么就让表格中的该行被选中
              for (let item of this.selDoneCrouse) {
                for (let itemChild of this.tableData) {
                  if (item.goods_id == itemChild.goods_id) {
                    this.$refs.goodsTable.toggleRowSelection(itemChild, true)
                  }
                }
              }
            }
          })
        })
      },
      // 选择表格展示商品
      selectCrouse(select) {
        this.selDoneCrouse = select
      },
      // 让选中的行勾选
      handleCurrentChange(row) {
        let bool = true
        for (let item of this.selDoneCrouse) {
          if (item.goods_id == row.goods_id) {
            bool = false
            break
          }
        }
        this.$refs.goodsTable.toggleRowSelection(row, bool)
      },
      // 删除选中的指定的商品列表
      delCrouse(row, index) {
        this.selDoneCrouse.splice(index, 1)
        if (this.tableData.length != 0) {
          this.$refs.goodsTable.toggleRowSelection(row, false)
        }
      },

      goodsContent(text) {
        this.auxiliaryForm.goods_content = text
      },
    },
  }
</script>

<style scoped>
  .padding_15 {
    padding: 15px;
  }
  span {
    color: red;
  }
  .flex_direction {
    display: flex;
    flex-direction: column;
  }
  .background_gray {
    background-color: rgb(248, 248, 248);
  }
  .margin_top_20 {
    margin-top: 20px;
  }
  .inp_title {
    width: 80px;
    text-align: right;
  }
</style>
